import Vue from 'vue'
import Vuex from 'vuex'
import persistedstate from 'vuex-persistedstate'
import router from '@/router' // router===this.$router
import { userProfile } from '@/api/user'
// import { setToken, getToken } from '@/utils/auth'
// 持久化：1：修改时存储到浏览器(cookie,localstorage)  2:初始化的值要获取浏览器存储  getxxx() || 默认值
// 借助插件vuex持久化存储的插件
/*
   vuex-persistedstate :作用：用于vuex数据持久化
   使用：
     1：下载  npm i vuex-persistedstate
     2:在store/index.js中导入使用
        import  persistedstate  from 'vuex-persistedstate'
     3：配制
        plugins:[
          persistedstate({
            paths:['哪些数据做持久化']
        })]
*/

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // tokenObj: JSON.parse(getToken()) || ''
    tokenObj: '',
    userInfo: '',
    num: 0
  },
  getters: {},
  mutations: {
    // mutations作用：用于修改state数据，且只是用于数据的同步处理
    setTokenObj (state, value) {
      state.tokenObj = value
      // token存储到浏览器
      // setToken(JSON.stringify(value))
    },
    logout (state) {
      state.userInfo = '' // 删除用户信息
      state.tokenObj = '' // 删除token 和refrech_token
      // 当前处于页面   vue中：this.$route.fullPath   js:location.href.split('#')[1]
      // 传：this.$router.push('/login?back='+回跳地址)   收：login页 this.$route.query.back
      router.push('/login?back=' + location.href.split('#')[1]) // 跳转至登陆页
    },
    setUserInfo (state, value) {
      state.userInfo = value
    },
    setNum (state, value) {
      state.num = value
    }
  },
  actions: {
    // 用于异步处理（它也可以做同步），但是它不能直接修改state数据，它修改state数据还是要通过mutations
    // 调用mutations:this.$store.commit('mutations方法名',实参)
    // 怎么调用触发actions:this.$store.dispatch('actions方法名',实参)
    test (store, value) {
      // store:{commit方法,state:获取当前的state数据}
      setTimeout(() => {
        store.commit('setNum', value)
      }, 1000)
    },
    // 调用接口获取用户信息并存储到vuex
    async getUserInfo (store) {
      if (!store.state.userInfo.id) {
        // console.log('getUserInfo')
        // if (!store.state.userInfo) {
        const res = await userProfile()
        store.commit('setUserInfo', res.data.data)
        // }
      }
    }
  },
  modules: {},
  plugins: [
    persistedstate({
      paths: ['tokenObj']
    })
  ]
})
